<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>
<body>










    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 188px;
            border: 2px solid red;
            margin: 0 auto;
            overflow: hidden;
        }

        ul {
            width: 1800px;
            height: 188px;
            background-color: black;
            animation: move 2s linear 0s infinite normal;
        }

        ul li {
            float: left;
            list-style: none;
            width: 300px;
            height: 188px;
            background-color: red;
            border: 1px solid #000;
            box-sizing: border-box;
        }

        ul:hover {
            /*动画添加给谁, 就让谁停止*/
            animation-play-state: paused;
        }

        ul:hover li {
            opacity: 0.3;
        }
        ul li:hover {
            opacity: 1;
        }

        img {
            width: 300px;
        }

        @keyframes move {
            from {
                margin-left: 0;
            }

            to {
                margin-left: -600px;
            }
        }
    </style>

    <div>
        <ul>
            <li><img src="../img/000.jpeg" alt=""></li>
            <li><img src="../img/111.jpeg" alt=""></li>
            <li><img src="../img/000.jpeg" alt=""></li>
        </ul>
    </div>




    <h1>    无缝轮播 -   支持 ie </h1>

    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   
        
        必知必会

        <div>
            <ul>
                <li><img src="../img/000.jpeg" alt=""></li>
                <li><img src="../img/111.jpeg" alt=""></li>
                <li><img src="../img/000.jpeg" alt=""></li>
            </ul>
        </div>
        
        ul:hover {
            animation-play-state: paused;    => 鼠标放在 ul 的时候, 动画停止
        }

        ul:hover li {
            opacity: 0.3;     => 鼠标一上去, 所有的 li 全部变黑
        }
        ul li:hover {
            opacity: 1;       => 但是鼠标经过的那个 li , 不变黑, 透明度为 1
        }

        本案例不涉及 JavaScript, 且支持 ie 
        本案例不涉及 JavaScript, 且支持 ie 
    </xmp>













</body>
</html>